@extends( 'layouts.main' )

@section( 'includes' )
	{{ HTML::script('js/recipe.js') }}
	{{ HTML::script('js/comment.js') }}
@endsection

@section( 'left-content' )
	<!-- Aqui la receta -->
	@include( 'recipe.recipe', array( 'recipe' => $recipe ))
    
    <!-- Aqui los pasos -->
	<h3>@lang( 'recipe.steps' )</h3>
    @foreach( $recipe->steps as $step )
        @include( 'recipe.step', array( 'step' => $step ) )
	@endforeach  
        
	<!-- Aqui los comentarios -->
	<h3>@lang( 'recipe.comments' )</h3>
	<ul class="timeline">
		@if( Auth::user() )
		<li id="new-comment-content" class="item-timeline post-form-timeline highlight">
			<div class="inner-content">
				<form method="post" action="/comment/insert-comment" onsubmit="return insertComment( this );">
					<input name="user_id" type="hidden" value="{{Auth::user()->id}}"/>
					<input name="recipe_id" type="hidden" value="{{$recipe->id}}"/>
					<table style="width: 100%;">
					<tr>
						<td style="vertical-align: top; width: 1px; ">
							{{ HTML::image( Auth::user()->avatar_url, Auth::user()->user_name, 
								array( 'class' => 'avatar', 'style' => 'margin-top:0px;border-radius: 50%;' ) ) }}
						</td>
						<td>
							<textarea name="comment" class="form-control" style="height: 75px;" 
								onkeyup="checkCommentLength( this.value, document.getElementById( 'comment-length' ) );"
								placeholder="@lang( 'recipe.comment' ) ..." maxlength="255"></textarea>
						</td>
					</tr>
					<tr>
						<td colspan="2" style="text-align: right; padding-top: 10px;">
							<span id="comment-length" style="vertical-align: middle;">10</span>
							<button type="submit" class="btn btn-primary btn-sm">@lang( 'recipe.comment' )</button>
						</td>
					</tr>
					</table>
				</form>
			</div><!-- /.inner-content -->
		</li>
		@endif
	
		@foreach( $recipe->commentsPagination as $comment )
			@if( !$comment->parent_comment ) 
				@include( 'recipe.comment', 
					array( 'comment' => $comment, 'user' => $recipe->user, 'userLikes' => $userLikes, 
						'userDislikes' => $userDislikes ) )
			@endif
		@endforeach
		
		@if( count( $recipe->commentsNoAnswersCount ) > 0 && 
			$recipe->commentsNoAnswersCount[0]->count > count( $recipe->commentsPagination ) )
		<li id="comments-button-loading" class="center-timeline-cat" onclick="getComments( {{ $recipe->id }} )"
			data-count_comments="{{$recipe->commentsNoAnswersCount[0]->count}}"
			data-current_count_comments="{{count( $recipe->commentsPagination )}}">
			<div class="inner" style="cursor: pointer;">
				@lang( 'recipe.loadMoreComments' )
			</div>
		</li>
		@endif
	
	</ul>
@endsection